<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>
		<script src="../../../js/jquery.min.js"></script>
		<script type="text/javascript">
			var i = 1,
				gentry = null,
				w = null;
			var hl = null,
				le = null,
				de = null,
				ie = null;
			var unv = true;
			var bUpdated = false; //用于兼容可能提前注入导致DOM未解析完更新的问题
			// H5 plus事件处理
			function plusReady() {
				// 获取摄像头目录对象
				plus.io.resolveLocalFileSystemURL('_doc/', function(entry) {
					entry.getDirectory('camera', {
						create: true
					}, function(dir) {
						gentry = dir;
						updateHistory();
					}, function(e) {
						outSet('Get directory "camera" failed: ' + e.message);
					});
				}, function(e) {
					outSet('Resolve "_doc/" failed: ' + e.message);
				});
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
			// 监听DOMContentLoaded事件
			document.addEventListener('DOMContentLoaded', function() {
				// 获取DOM元素对象
				hl = document.getElementById('history');
				le = document.getElementById('empty');
				de = document.getElementById('display');
				if(ie = document.getElementById('index')) {
					ie.onchange = indexChanged;
				}
				// 判断是否支持video标签
				unv = !document.createElement('video').canPlayType;
				updateHistory();
			}, false);

			function changeIndex() {
				outSet('选择摄像头：');
				ie.focus();
			}

			function indexChanged() {
				de.innerText = ie.options[ie.selectedIndex].innerText;
				i = parseInt(ie.value);
				alert(de.innerText);
			}
			// 拍照
			function getImage() {
				alert('开始拍照：');
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					alert('成功：' + p);
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						createItem(entry);
					}, function(e) {
						alert('读取拍照文件错误：' + e.message);
					});
				}, function(e) {
					alert('失败：' + e.message);
				}, {
					filename: '_doc/camera/',
					index: 1
				});
			}
			 
			// 显示文件
			function displayFile(li) {
				
				console.log(li.entry.toLocalURL());
				
				$("#tp").attr("src",li.entry.toLocalURL());
				/*if(w) {
					alert('重复点击！');
					return;
				}
				if(!li || !li.entry) {
					ouSet('无效的媒体文件');
					return;
				}
				var name = li.entry.name;
				var suffix = name.substr(name.lastIndexOf('.'));
				var url = '';
				if(suffix == '.mov' || suffix == '.3gp' || suffix == '.mp4' || suffix == '.avi') {
					//if(unv){plus.runtime.openFile('_doc/camera/'+name);return;}
					url = '/plus/camera_video.html';
				} else {
					url = '/plus/camera_image.html';
				}
				w = plus.webview.create(url, url, {
					hardwareAccelerated: true,
					scrollIndicator: 'none',
					scalable: true,
					bounce: 'all'
				});
				w.addEventListener('loaded', function() {
					w.evalJS('loadMedia("' + li.entry.toLocalURL() + '")');
					//w.evalJS('loadMedia("'+'http://localhost:13131/_doc/camera/'+name+'")');
				}, false);
				w.addEventListener('close', function() {
					w = null;
				}, false);
				w.show('pop-in');*/
			}

			// 添加播放项
			function createItem(entry) {
				var li = document.createElement('li');
				li.className = 'ditem';
				li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
				li.setAttribute('onclick', 'displayFile(this)');
				hl.insertBefore(li, le.nextSibling);
				li.querySelector('.aname').innerText = entry.name;
				li.querySelector('.ainf').innerText = '...';
				li.entry = entry;
				updateInformation(li);
				// 设置空项不可见
				le.style.display = 'none';
			}
		</script>
		<link rel="stylesheet" href="../../../css/common.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			.aname {
				font-size: 16px;
			}
			
			.ainf {
				font-size: 12px;
			}
			
			.iplay {
				display: block;
				background: no-repeat right center url();
				background-size: 50px 44px;
				-ms-touch-action: auto;
			}
		</style>
	</head>

	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">Camera</div>
			<div class="nvbt idoc" onclick="openDoc('Camera Document','/doc/camera.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<div class="button" onclick="getImage()">拍照</div>
			<br/>
			<img id="tp" src="" width="100%"/>
			<br/>
		</div>
	</body>
	<script type="text/javascript" src="../js/immersed.js"></script>

</html>